<template>
    <div class="app-container">
      <div class="filter-container">

        <el-input type="input" v-model="listQuery.bookid" placeholder="书籍id搜索" style="width: 220px;"
        class="filter-item" />

        <el-input type="input" v-model="listQuery.name" placeholder="书籍名称搜索" style="width: 220px;"
        class="filter-item"/>
       
        <el-select
          v-model="listQuery.status"
          style="width: 150px"
          class="filter-item"
          @change="handleFilter"
        >
          <el-option key="2" label="已停用" :value="2" />
          <el-option key="1" label="已启用" :value="1" />
          <el-option key="3" label="后台上传" :value="0" />
        </el-select>
        <a-button type="primary" size="large" @click="handleFilter">
          搜索
        </a-button>
        <a-button type="default" size="large" @click="handleCancel">
          重置
        </a-button>
        <br/>
        <el-button
        plain size="small"
            v-waves
            class="filter-item btn"
            type="success"
            @click="showAdd()"
        >添加书籍</el-button>
      </div>
  
      <el-table
        :key="tableKey"
        v-loading="listLoading"
        :data="list"
        fit
        highlight-current-row
        style="width: 100%"
      >
      <el-table-column key="1235" type="expand">
          <template slot-scope="props">
            <el-form label-position="left" inline class="demo-table-expand">
              <el-form-item label="封面:" key="11">
                <el-image
                  style="width: 100px; height: 133px"
                  :src="props.row.BookPic"
                  fit="fit">
                </el-image>
              </el-form-item>
              <el-form-item label="介绍:" key="12">
                <span>{{ props.row. intro}}</span>
              </el-form-item>
            </el-form>
          </template>
        </el-table-column>

        <el-table-column
          key="1"
          label="书籍id"
          align="center"
          prop="book_id"
          min-width="50"
        >
        </el-table-column>
        <el-table-column
          key="2"
          label="书籍名称"
          align="center"
          prop="name"
          min-width="50"
        >
        </el-table-column>
        <el-table-column
          key="3"
          label="作者"
          align="center"
          prop="author"
          min-width="50"
        >
        </el-table-column>

        <el-table-column
          key="4"
          label="操作"
          align="center"
          prop="123"
          min-width="50"
        >
        <template slot-scope="{row}">
            <el-link type="primary" @click="showEdit(row)">编辑</el-link>
    
            <el-link type="danger" @click="detail(row)">进入详情</el-link>
        </template>
        
        </el-table-column>

      </el-table>
      <pagination
      v-show="total > 0"
      :total="total"
      class="pageShow"
      :pageSizes = [20,30,50,100,200]
      :page.sync="listQuery.page"
      :limit.sync="listQuery.page_size"
      @pagination="getChannelList"
    />

       <div>
        <el-dialog
            :title="temp.is_edit? '编辑书籍':'添加书籍'"
            :visible.sync="bookFormShow"
            width="50%"
            :before-close="handleClose"
            class="fullwidth"
            enctype="multipart/form-data"
            >
            <div>
                <el-form :model="temp" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">

                    <el-form-item label="分类" prop="classId">
                        <el-select v-model="temp.classId" filterable placeholder="请选择">
                            <el-option
                            v-for="item in classify"
                            :key="item.category_id"
                            :label="item.channel + '-'+ item.name"
                            :value="item.category_id"
                            
                            >
                            </el-option>
                        </el-select>
                        <!-- <el-input v-model="temp.classId"></el-input> -->
                    </el-form-item>

                    <el-form-item label="书籍名称" prop="name">
                        <el-input v-model="temp.name"></el-input>
                    </el-form-item>

                    <el-form-item label="作者" prop="author">
                        <el-input v-model="temp.author"></el-input>
                    </el-form-item>

                    <el-form-item label="简介" prop="intro">
                        <el-input type="textarea" v-model="temp.intro"></el-input>
                    </el-form-item>
                    <el-form-item label="封面" prop="cover">

                        <el-upload
                            name="img"
                            class="avatar-uploader"
                            id="up"
                            action="http://api_data.ydwhgs.com/api/upload/cover"
                            :show-file-list="false"
                            :on-success="handleAvatarSuccess"
                            :before-upload="beforeAvatarUpload">
                            <img v-if="imageUrl" :src="imageUrl" class="avatar">
                            <i v-else class="el-icon-plus avatar-uploader-icon"></i>

                        </el-upload>
                    </el-form-item>

                    <el-form-item label="点击数量" prop="clicks">
                        <el-input type="number" v-model.number="temp.clicks" class="w-100"></el-input>
                    </el-form-item>

                    <el-form-item label="评分" prop="score">
                        <el-input type="number" v-model.number="temp.score" class="w-100"></el-input>
                    </el-form-item>
                </el-form>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="bookFormShow = false">取 消</el-button>
                <el-button type="primary" @click="temp.is_edit ? editBook1(): addBook1()">提 交</el-button>
            </span>
            </el-dialog>

        </div>
    </div>
  </template>
  
  <script>
  import {
    BookSearch,
    addBook,
    editBook,
    getBookCategory
  } from "@/api/admin/book";
  import waves from "@/directive/waves"; // waves directive
  import Pagination from "@/components/Pagination"; // secondary package based on el-pagination
  import { MessageBox, Message } from "element-ui";
  export default {
    name: "Report",
    components: { Pagination },
    directives: { waves },
    filters: {
      statusFilter(status) {
        const statusMap = {
          published: "success",
          draft: "info",
          deleted: "danger",
        };
        return statusMap[status];
      },
    },
    data() {
      return {
        userType: this.$store.state.user.type,
        username: this.$store.state.user.name.username,
        tableKey: 0,
        list: null,
        total: 0,
        listLoading: false,
        listQuery: {
          page: 1,
          page_size: 20,
          bookid: '',
          name: "",
          status:'',
        },
        imageUrl: '',
        temp:{
            is_edit:false,
            book_id: '',
            classId: '',
            name: '',
            cover: '',
            intro: '',
            author: '',
            category: '',
            clicks: 0,
            score: 0
        },
        bookFormShow: false,
        rules: {
          name: [
            { required: true, message: '请输入章节名称', trigger: 'blur' }
          ],
          classId: [
            { required: true, message: '请选择分类', trigger: 'blur' }
          ],
          cover: [
            { required: true, message: '请上传封面', trigger: 'blur' }
          ],
          intro: [
            { required: true, message: '请输入简介', trigger: 'blur' }
          ],
          author: [
            { required: true, message: '请输入作者', trigger: 'blur' }
          ]
        },
        classify:[]
      };
    },
    created() {
    },
    mounted() {
        this.getClassify()
    },
    methods: {
      getClassify(){
        getBookCategory().then(res => {
            if(res.code == 200){
                this.classify = res.data;
            }
        })
      },
      classifyName(classify_id){
        for(let item of this.classify){
            if (classify_id == item.category_id){
                return item.name
            }
        }

      },
      getList() {
        this.listLoading = true;
        BookSearch(this.listQuery).then(res => {
          this.listLoading = false;

          if (res.code == 200){
            this.list = res.data.list
            this.total = res.data.total
          }else{
            Message({
                message: res.message,
                type: "error",
                duration: 2000,
              });
          }
        })
            
      },
      handleFilter() {
        this.listQuery.page = 1;
        this.getList();
      },
      handleCancel() {
        this.listQuery.page = 1;
        this.listQuery.bookid = 1;
        this.listQuery.name = ''
        this.listQuery.status = ''
        this.getList();
      },
      detail(row){
        this.$router.push({
            path: '/book/detail',
            query: row
        })
      },
      handleClose(){
        this.bookFormShow = false
      },
      showAdd(){
        this.temp = {
            is_edit:false,
            book_id: '',
            classId: '',
            name: '',
            cover: '',
            intro: '',
            author: '',
            category: '',
            clicks: 0,
            score: 0
        }
        this.bookFormShow = true
      },
      addBook1(){
        this.$refs['ruleForm'].validate((valid) => {
          if (valid) {
            this.temp.category = this.classifyName(this.temp.classId)
            addBook(this.temp).then(res => {
                if (res.code == 200){
                    this.bookFormShow = false
                    Message({
                        message: res.message,
                        type: "success",
                        duration: 2000,
                    })
                }else{
                    Message({
                        message: res.message,
                        type: "error",
                        duration: 2000,
                    })
                }
            })
          } else {
          }
        });
      },
      showEdit(row){
        this.temp={
            is_edit: true,
            book_id: row.book_id,
            classId: row.ClassId,
            name: row.name,
            cover: row.cover,
            intro: row.intro,
            author: row.author,
            category: row.author,
            clicks: row.clicks,
            score: row.score,
        }
        this.imageUrl = row.BookPic
        this.bookFormShow = true

      },
      editBook1(){
        this.$refs['ruleForm'].validate((valid) => {
          if (valid) {
            this.temp.category = this.classifyName(this.temp.classId)
            editBook(this.temp).then(res => {
                if (res.code == 200){
                    this.bookFormShow = false
                    Message({
                        message: res.message,
                        type: "success",
                        duration: 2000,
                    })
                    this.getList()
                }else{
                    Message({
                        message: res.message,
                        type: "error",
                        duration: 2000,
                    })
                }
            })
          } else {
          }
        });
      },
      beforeAvatarUpload(file) {
        },
      handleAvatarSuccess(res, file){
            this.temp.cover = res.data
            this.imageUrl = 'http://pic.ydwhgs.com' + res.data
            // this.imageUrl = 'http://127.0.0.1:84' + res.data
            // console.log(res,file)
        },
    }
  };
  </script>
  
  <style>
.demo-table-expand {
    font-size: 0;
  }
  .demo-table-expand label {
    width: 90px;
    color: #99a9bf;
  }
  .demo-table-expand .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    width: 95%;
  }
  .pageHidden {
    display: none;
  }
  @media (max-width: 550px) {
    .pageShow {
      display: none;
    }
    .pageHidden {
      display: block;
    }
    .pickertime {
      width: 100%;
    }
  }
  .filter-item {
    margin-bottom: 3px;
  }
  @media (max-width: 550px) {
  .pageShow {
    display: none;
  }
  .pageHidden {
    display: block;
  }
  .fullwidth {
    width: 100%;
    margin-left: 0;
  }
}

.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}
.avatar-uploader .el-upload:hover {
    border-color: #409EFF;
}
.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 100px;
    height: 133px;
    line-height: 133px;
    text-align: center;
}
.avatar {
    width: 100px;
    height: 133px;
    display: block;
}
.w-100{
width: 100px;
}
  </style>
  